const {
    dev,
    prd
} = require('./src/config')

const cdn = {
    css: [
        'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
        'https://unpkg.com/element-ui/lib/theme-chalk/display.css',
    ],
    js: [
        'https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vue-router/3.2.0/vue-router.min.js',
        'https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js',
        'https://unpkg.com/element-ui/lib/index.js',
        'https://unpkg.com/axios/dist/axios.min.js'
    ]
}

const externals = {
    // 属性名称 vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，不去 node_modules 中找，而是去找全局变量 Vue（其他的为VueRouter、Vuex、axios、ELEMENT、echarts，注意全局变量是一个确定的值，不能修改为其他值，修改为其他大小写或者其他值会报错，若有异议可留言）
    vue: 'Vue',
    'vue-router': 'VueRouter',
    vuex: 'Vuex',
    axios: 'axios',
    'element-ui': 'ELEMENT',
}

module.exports = {
    productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    publicPath: process.env.NODE_ENV == 'development' ? '/' : './',
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "@/assets/style/base.scss";`
            }
        }
    },
    devServer: {
        hot: true, //hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览
        open: false, // 使用浏览器自动打开
        https: false,
        port: 8080,
        // 代理
        // proxy: {
        //     // 匹配到/localApi开头时 替换成target指定的地址
        //     '/localApi': {
        //         // 本地
        //         target: process.env.VUE_APP_SRC,
        //         changeOrigin: true, // 开发环境才开启反向代理, 运行(生产)环境不开启
        //         pathRewrite: {
        //             // 把匹配到的/localApi这段开头 替换成 /
        //             '^/localApi': '/'
        //         }
        //     },
        // }
    },

    // chainWebpack: (config) => {
    //     //配置别名
    //     config.resolve.alias
    //         .set('@', resolve('src'))
    //         .set('assets', resolve('src/assets'))
    //         .set('components', resolve('src/components'))
    //         .set('utils', resolve('src/utils'));
    // },

    chainWebpack: config => {
        // 发布模式
        config.when(process.env.NODE_ENV === 'production', config => {
            config
                .entry('app')
                .clear()
                .add('./src/main-prd.js')

            // 配置title
            config.plugin('html').tap(args => {
                args[0].isProd = true
                args[0].title = prd.title
                args[0].cdn = cdn // cdn导入
                return args
            })
            //视为一个外部库，而不将它打包进来
            config.externals(externals)

            // 清除所有console对象的函数
            config.optimization.minimizer('terser').tap((args) => {
                args[0].terserOptions.compress.drop_console = true
                return args
            })

        })

        // 开发模式
        config.when(process.env.NODE_ENV === 'development', config => {
            config
                .entry('app')
                .clear()
                .add('./src/main.js')

            config.plugin('html').tap(args => {
                args[0].isProd = false
                args[0].title = dev.title
                return args
            })
        })
    }
}